<!-- eslint-disable vue/multi-word-component-names -->

<template>
  <div class="needToDo">
    <van-sticky>
      <van-nav-bar title="故障设备列表" left-arrow @click-left="goBack" />
      <van-search v-model="searchKey" placeholder="请输入搜索关键词" shape="round" />
      <div class="tab-box">
        <van-tabs
          v-model:active="active"
          @click-tab="onClickTab"
          shrink
          title-active-color="#3f9b6a"
        >
          <van-tab title="全部"></van-tab>
          <van-tab title="维修中"></van-tab>
          <van-tab title="已维修"></van-tab>
        </van-tabs>
        <div class="xinzeng">
          <img src="~@/assets/icon/xinzeng.png" @click="jumpPage('/assetRepairReport')" />
        </div>
      </div>
    </van-sticky>
    <div class="content-list mt-10 page-container">
      <div class="scroll-box">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <CommonCard v-for="(item, i) in list" :key="i">
              <div class="content" @click="jumpPage('/maintenanceProgress', item)">
                <div class="top">
                  <div class="left">
                    <img
                      class="img"
                      src="https://img0.baidu.com/it/u=613413583,534154897&fm=253&fmt=auto&app=138&f=JPEG?w=688&h=500"
                    />
                  </div>
                  <div class="right">
                    <div class="fs-15 fw-b f-j-b">
                      <div>{{ item.device }}</div>
                      <div>{{ item.grade }}</div>
                    </div>
                    <div class="f-j-b mt-2">
                      <div>{{ item.code1 }}</div>
                      <div>{{ item.type }}</div>
                    </div>
                    <div class="f-a-c mt-2">
                      <van-tag plain round type="primary" class="mr-4">优质</van-tag>
                      {{ item.supplier }}
                    </div>
                  </div>
                </div>
                <div class="mt-16">使用地点：{{ item.location }}</div>
                <div class="mt-2">资产条码：{{ item.code2 }}</div>
                <div class="f-j-b mt-2">
                  <div>所属部门：{{ item.department }}</div>
                  <van-tag plain round type="primary" class="mr-4">{{ item.status }}</van-tag>
                </div>
              </div>
            </CommonCard>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CommonCard from '@/components/CommonCard/index.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const goBack = () => {
  router.back()
}
const searchKey = ref('')

const list = ref([
  {
    id: 1,
    device: '中央空调',
    grade: '高级资产',
    code1: 'CG-254162',
    type: '空调',
    supplier: '君逸数码',
    location: '江滩公园',
    code2: 'CGUIJ-254162',
    department: '工程部',
    status: '跟踪',

    specs: '资产的规格参数信息，比如大小，功率能耗，接口数量等',
    notes: '这是一个非常好的空调',
    time1: '2023-12-23',
    time2: '2023-12-30',
    time3: '3年',
    desc: '空调制冷效果差',
    result: '已经修好了'
  }
])

const loading = ref(false)
const finished = ref(true)
const refreshing = ref(false)
const onRefresh = () => {
  // 清空列表数据
  finished.value = true

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  onLoad()
}
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      // list.value = []
      refreshing.value = false
    }

    loading.value = false

    if (list.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}

const active = ref('')
const onClickTab = (e: any) => {
  console.log(e, 789798)
}
const jumpPage = (path: string, item?: any) => {
  let option = {
    path: path
  }
  if (item) {
    option.query = {
      queryData: JSON.stringify(item)
    }
  }
  router.push(option)
}
</script>

<style scoped lang="less">
.needToDo {
  display: flex;
  flex-direction: column;
  height: 100%;
  .tab-box {
    display: flex;
    align-items: center;
    padding-right: 16px;
    .van-tabs {
      flex: 1;
    }
  }
  .content-list {
    flex: 1;
    overflow: hidden;

    font-size: 13px;
    line-height: 1.3846;
  }
  .content {
    &:last-child {
      border: none;
      margin-bottom: 0;
    }
    .top {
      display: flex;
    }
  }
  .left {
    flex: 0 0 62px;
    height: 62px;
    margin-right: 10px;
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .tag {
    border: 1px solid @themeColor;
    color: @themeColor;
    padding: 2px 8px;
    border-radius: 50px;
    margin-right: 15px;
  }
  .right {
    flex: 1;
    overflow: hidden;
  }
  .xinzeng > img {
    width: 20px;
    height: 20px;
  }
}
</style>
